<template>
	<view class="list" @click="onClick">
		<image class="list-img" :src="img" mode=" widthFix"></image>
		<view class="list-con">
			<view class="list-box">
				<view class="list-tit">{{title}}</view>
				<view class="list-time">{{time}}</view>
			</view>
			<view class="list-sta" v-if="statu==='2'" @click.stop="signUp"
			:style="{background:sign_statu==2?'#02BB6F':'#ddd',color:sign_statu==2?'#fff':'#999'}"
			>{{sign_statu==2?'报名':'报名结束'}}</view>
			<view class="list-sta" v-if="statu==='3'" @click.stop="signUp"
			:style="{color:sign_statu==2?'#fff':'#fff'}"
			>{{sign_statu==2?'报名':'已结束'}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			img:{
				type: String,
				default: ''
			},
			title:{
				type: String,
				default: ''
			}, 
			time:{
				type: String,
				default: ''
			},
			sign_statu:{
				type: String,
				default: ''
			},
			statu:{
				type: String,
				default: '1'
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			},
			signUp() {
				this.$emit('signUp')
			}
		}
	}
</script>

<style lang="scss" scoped>
.list{
	position: relative;
	height: 384rpx;
	border-radius: 10rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	.list-img{
		width: 100%;
		max-width: 100%;
		height: 100%;
	}
	.list-con{
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		background-color: rgba(0,0,0,.5);
		padding: 0 32rpx;
		.list-box{
			width: 70%;
			display: flex;
			flex-direction: column;
			.list-tit{
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
				font-weight: bold;
				color: #fff;
			}
			.list-time{
				font-size: 24rpx;
				font-weight: 500;
				color: #fff;
			}
		}
		.list-sta{
			width: 25%;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			height: 52rpx;
			line-height: 52rpx;
			border-radius: 26px;
			padding: 0 10rpx;
		}
	}
}
</style>
